<template>
  <div>
    <!-- 顶部操作部分 -->
    <div>
      <ButtonGroup size="default">
        <Button >重置题目</Button>
        <Button @click="kindsOfMainFlag = true">种类维护</Button>
        <Button >批量删除</Button>
        <Button @click="batchOfNewFlag = true">批量新增</Button>
        <Button @click="addNewTopic = true">新增题目</Button>
      </ButtonGroup>
      <br><br>
    </div>
    <!-- 搜索条件 -->
    <div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
      创建人:<Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
      题库种类:<Select v-model="searchKey" class="search-col">
        <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
      </Select>
      题目类型:<Select v-model="searchKey" class="search-col">
        <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
      </Select>
      题库难度:<Select v-model="searchKey" class="search-col">
        <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
      </Select>
      <Button class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
    </div>
    <div style="height: 20px"></div>
    <!-- 表格部分 -->
    <div>
      <Table
        ref="selection"
        :data="insideTableData"
        :columns="insideColumns"
        stripe
        border
      >
        <template slot-scope="{ row }" slot="content"></template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
          <Button type="error" size="small" @click="remove(index)" style="margin-right: 5px">删除</Button>
          <Button type="warning" size="small" @click="update(index)" style="margin-right: 5px">修改</Button>
          <!-- 修改弹窗 -->
          <Modal
            v-model="modalUpdate"
            title="题目修改"
            :loading="load"
            @on-ok="asyncOK">
            <!-- 修改的表单 -->
            <Form :model="formItem" :label-width="80">
              <FormItem label="题目类型">
                <Input v-model="formItem.type"></Input>
              </FormItem>
              <FormItem label="题目难度">
                <Select v-model="formItem.diff">
                  <Option value="beijing">较易</Option>
                  <Option value="shanghai">普通</Option>
                  <Option value="shenzhen">难</Option>
                </Select>
              </FormItem>
              <FormItem label="题目内容">
                <Input v-model="formItem.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="参考答案">
                <Input v-model="formItem.answer" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="答案解析">
                <Input v-model="formItem. analysis" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
              </FormItem>
            </Form>
<!--            提示：多福多寿辅导费大幅度-->
          </Modal>
        </template>
      </Table>
    </div>
    <!-- 分页 -->
    <div>
      <Page :total="2" show-sizer show-total />
    </div>
    <!-- 种类维护弹窗 -->
    <Modal
      v-model="kindsOfMainFlag"
      title="种类维护"
      @on-ok="kindsOfMainOk" width="700">
      <!-- 种类维护的表单 -->
      <div>
        <List>
          <ListItem><strong>新增库名:</strong><Input v-model="theNewLibrary" placeholder="输入题库" clearable style="width: 200px;margin: 5px 10px" /><Button type="primary">题库新增</Button></ListItem>
          <ListItem><strong>删除题库:</strong>
            <Select v-model="delLibSelect" style="width: 200px;margin: 5px 10px">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Button type="error">题库删除</Button>
          </ListItem>
          <ListItem><strong>改题库名:</strong>
            <Select v-model="upLibSelect" style="width: 200px;margin: 5px 10px">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Input v-model="theUpLibrary" placeholder="输入题库" clearable style="width: 200px;margin: 5px 10px" />
            <Button type="warning">改题库名</Button>
          </ListItem>
        </List>
      </div>
    </Modal>
    <!-- 新增题目表单 -->
    <Modal
      v-model="addNewTopic"
      title="新增题目"
      loading
      @on-ok="addNewTopicMethod" width="700">
      <!-- 新增的表单 -->
      <div>
        <Form :model="formItem" :label-width="100">
          <FormItem label="题库：">
            <Select v-model="formItem.select" style="width: 30%">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="题目类型：">
            <Select v-model="formItem.select" style="width: 30%">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="难度等级：">
            <Select v-model="formItem.select" style="width: 30%">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="题目内容：">
            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
          </FormItem>
          <FormItem
            v-for="(item, index) in formDynamic.items"
            v-if="item.status"
            :key="index"
            :label="'选项 ' + item.index + '：'">
            <Row>
              <Col span="2">
                <Input type="text" v-model="item.optionNumber" placeholder="编号"></Input>
              </Col>
              <Col span="15" style="margin: 0px 5px">
                <Input type="text" v-model="item.value" placeholder="选项内容"></Input>
              </Col>
              <Col span="4" >
                <Button size="small" type="error" @click="handleRemove(index)">删除答案</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Row>
              <Col span="12">
                <Button type="dashed" long @click="handleAdd" icon="md-add">增加答案</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="题目答案：">
            <Input v-model="theNewLibrary" placeholder="输入答案，用英文逗号分隔" clearable style="width: 200px" />
          </FormItem>
          <FormItem label="答案解析：">
            <Input type="textarea" :autosize="{minRows: 10,maxRows: 30}" v-model="theNewLibrary" placeholder="Enter something..." />
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- 批量新增 -->
    <Modal
      v-model="batchOfNewFlag"
      title="批量新增题目"
      loading
      @on-ok="addNewTopicMethod" width="700">
      <!-- 新增的表单 -->
      <div>
        <List border>
          <ListItem>题库：
            <Select style="width: 30%">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </ListItem>
          <ListItem>上传文件：
            <Upload action="//jsonplaceholder.typicode.com/posts/">
              <Button icon="ios-cloud-upload-outline">Upload files</Button>
            </Upload>
            <span style="font-size: 1px">（仅支持excel格式,<a>点击下载模板</a>）</span>
          </ListItem>

        </List>
      </div>
    </Modal>
  </div>
</template>

<script>
import './index.less'
export default {
  name: 'tkgl',
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    size: String,
    width: {
      type: [Number, String]
    },
    height: {
      type: [Number, String]
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    highlightRow: {
      type: Boolean,
      default: false
    },
    rowClassName: {
      type: Function,
      default () {
        return ''
      }
    },
    context: {
      type: Object
    },
    noDataText: {
      type: String
    },
    noFilteredDataText: {
      type: String
    },
    disabledHover: {
      type: Boolean
    },
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * @description 全局设置是否可编辑
     */
    editable: {
      type: Boolean,
      default: false
    },
    /**
     * @description 是否可搜索
     */
    searchable: {
      type: Boolean,
      default: true
    },
    /**
     * @description 搜索控件所在位置，'top' / 'bottom'
     */
    searchPlace: {
      type: String,
      default: 'top'
    }
  },
  /**
   * Events
   * @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
   * @on-cancel-edit 返回值 {Object} 同上
   * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
   */
  data () {
    return {
      insideColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          key: 'content',
          title: '题目内容'
        },
        {
          key: 'kind',
          title: '题目种类'
        },
        {
          key: 'type',
          title: '题目类型'
        },
        {
          key: 'diff',
          title: '难度'
        },
        {
          key: 'createTime',
          title: '创建时间'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ], // 表格列数据
      insideTableData: [
        {
          content: '题目内容1',
          kind: '种类1',
          type: '题目类型1',
          diff: '难度1',
          createTime: '创建时间1',
          moreDetail: '点击查看详情'
        },
        {
          content: '题目内容2',
          kind: '种类2',
          type: '题目类型2',
          diff: '难度2',
          createTime: '创建时间2'
        },
        {
          content: '题目内容3',
          kind: '种类3',
          type: '题目类型3',
          diff: '难度3',
          createTime: '创建时间3'
        }
      ], // 表格记录数据
      modalUpdate: false,   //修改弹窗的弹出标志位
      load: true,
      formItem: {
        type: '',
        diff: '',
        content: '',
        answer: '',
        analysis:''
      },
      kindsOfMainFlag: false, // 种类维护弹窗的标志位
      styles: {       // 种类维护抽屉的属性
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      theNewLibrary: '',
      cityList: [
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      delLibSelect: '', // 删除题库时的选择
      upLibSelect: '',   // 修改题库名时的选择
      theUpLibrary: '',   // 修改题库名时的输入
      addNewTopic: false, // 新增题目弹窗标志
      index: 1,
      formDynamic: {
        items: [
          {
            optionNumber: '', // 选项编号
            value: '', //选项内容
            index: 1,
            status: 1
          }
        ]
      },
      batchOfNewFlag: false // 批量新增题目标志
    }
  },
  methods: {
    show (index) {
      this.$Modal.info({
        title: '题目详情',
        content: `题目内容：${this.insideTableData[index].content}<br>
                  种类：${this.insideTableData[index].kind}<br>
                  题目类型：${this.insideTableData[index].type}<br>
                  题目难度：${this.insideTableData[index].diff}<br>
                  创建时间：${this.insideTableData[index].createTime}<br>`
      })
    },
    remove (index) {
      console.log("ewew:"+this.insideTableData[index].content)
      this.insideTableData.splice(index,1);
    },
    update (index) {
      this.modalUpdate = true;
      // 分别赋值
      this.formItem.type = this.insideTableData[index].type;
    },
    asyncOK () {
      // 用于表单提交，请求后台成功可以把标志位改为false
      setTimeout(() => {
        this.modalUpdate = false;
        this.$Message.info('修改成功！');
      }, 2000);
    },
    /* 种类维护弹窗确定后的操作 */
    kindsOfMainOk () {
      // 操作后对表单刷新
      this.$Message.info('Clicked ok');
    },
    addNewTopicMethod () {
      // 用于表单提交，请求后台成功可以把标志位改为false
      setTimeout(() => {
        this.addNewTopic = false;
        this.$Message.info('修改成功！');
      }, 2000);
    },
    /* 选项删除 */
    handleRemove (index) {
      this.formDynamic.items[index].status = 0;
      this.index--;
    },
    /* 选项增加 */
    handleAdd () {
      this.index++;
      this.formDynamic.items.push({
        optionNumber: '',
        value: '',
        index: this.index,
        status: 1
      });
    },
  }
}
</script>
